<template>
  <div class="out">
    <zHeader pageTitle="商铺位置"></zHeader>
    <div class="pageOut">
      <div class="imageContent">
        <img :src="storeLocation" alt="商铺位置图片" class="image" v-if="storeLocation"
        @click="imagePreviewHandler(storeLocation)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { postStoreInfo } from '@/api/fangWuInfo/index.js'
import { getUserId} from '@/config/config.js'
import { pageConstant } from '@/config/contant.js'
import { onMounted } from 'vue'


const storeLocation = ref('')
const loadStoreInfoData=()=>{
    const userId=getUserId();
    if(userId){
        postStoreInfo({userId:userId}).then(res=>{
            if(res.data.code==pageConstant.okCode){
                if(res.data.data){
                    // console.log(res.data.data);
                    const storeInfo=res.data.data;
                    storeLocation.value=storeInfo.urls;
                    console.log('商铺位置图片:',storeLocation.value);
                }
            }
        }).catch(err=>{
            console.log(err)
        })
    }
}
onMounted(()=>{
    loadStoreInfoData();
})



  
const imagePreviewHandler = (url) => {
  showImagePreview([url]);
}
</script>

<style lang="scss" scoped>
.out {
  background-color: rgb(241, 241, 241);
  min-height: 100dvh;

  .pageOut {
    padding: 18px;
    padding-top: 0;

    .imageContent {
      margin-top: 10px;
      border-radius: 5px;
      height: 225px;
      width: 100%;
      position: relative;
      overflow: hidden;

      .image {
        height: 100%;
        width: 100%;
        border-radius: 5px;
      }

      .videoPlayIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .preImageBtn {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: rotate(0.5turn) translate(50%, 50%);
      }

      .nextImageBtn {
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translate(-50%, -50%);
      }
    }

    .apartmentTypeImageOut {
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      padding-top: 10px;

      .apartmentTypeImage {
        object-fit: contain;
        height: 217px;
        width: 182px;
      }

      .directionArea {
        position: absolute;
        top: 5px;
        left: 245px;

        .tipText {
          width: 24px;
          text-align: center;
          font-weight: bold;
          font-size: 12px;
        }

        .directionIcon {
          transform: rotate(0.375turn);
        }
      }
    }

    .cellGroupCard {
      background-color: #fff;
      margin: 0;
      margin-top: 10px;

      ::v-deep .van-cell {
        font-size: 16px;
      }
    }

    .tableOut {
      border-radius: 8px;
      overflow: hidden;
      color: #5a5a5a;
      // padding: 15px;
      // ::v-deep .vant-table-wrapper {
      //   border: 1px solid #d0d0d0;
      // }

      ::v-deep .vant-th {
        font-size: 14px;
      }

      ::v-deep .vant-td {
        font-size: 16px;
      }

      ::v-deep .vant-td:first-child {
        color: #344054;
      }
    }

    ::v-deep .van-swipe {
      height: 100%;
      width: 100%;
    }

    .custom-indicator {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 2px 5px;
      font-size: 16px;
      color: #fff;
      letter-spacing: 5px;
    }

    .iconOut {
      position: absolute;
      top: 60px;
      right: 18px;
      z-index: 100;
    }

    .decorationMatterOutCard {
      padding: 84px 18px 60px;
      height: 100%;
      box-sizing: border-box;

      .imageOut {
        padding: 20px 0 10px 0;

        .image {
          object-fit: contain;
          height: 370px;
          max-width: 100%;
        }
      }

      .textArea {
        background-color: #fff;
        padding: 10px 15px;
        border-radius: 5px;
        max-height: calc(100% - 24px - 403px);
        overflow: auto;
        line-height: 23px;
      }
    }
  }
}
</style>